<template>
  <div class="slide">
    <div class="logo flex-center flex-align-items-center">
      <img src="@/assets/logo-light.png" class="pointer" @click="toPath('/')">
    </div>
    <div v-for="(item, index) in data.stagingMenuList" :key="index" class="menu-list">
      <div class="first-item flex flex-align-items-center pointer"
        :class="{ 'second-item': item.icon, active: route.path === item.path }" @click="toPath(item.path)">
        <i v-if="item.icon" class="iconfont" :class="item.icon"></i>
        <span :class="item.icon ? 'font-14' : 'font-12'">{{ item.name }}</span>
      </div>
      <el-menu v-if="item.children" :default-active="menuCurrent" class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose">
        <template v-for="(child, childIndex) in item.children">
          <el-sub-menu v-if="child.children" :key="childIndex" :index="child.name">
            <template #title>
              <div class="second-item flex flex-align-items-center">
                <i v-if="child.icon" class="iconfont" :class="child.icon"></i>
                <span class="font-14">{{ child.name }}</span>
                <img v-if="child.isNew" src="@/assets/icon-new.png" class="new-img">
              </div>
            </template>
            <el-menu-item v-for="(child1, childIndex1) in child.children" :key="childIndex1" :index="child1.path"
              @click="toPath(child1.path)">
              <div class="third-item font-14">{{ child1.name }}</div>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.path" @click="toPath(child.path)">
            <div class="second-item flex flex-align-items-center">
              <i v-if="child.icon" class="iconfont" :class="child.icon"></i>
              <span class="font-14">{{ child.name }}</span>
              <img v-if="child.isNew" src="@/assets/icon-new.png" class="new-img">
            </div>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import data from '@/js/data.js';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const menuCurrent = ref(route.path);

// 跳转登录页
const toPath = path => {
  if (path) {
    router.push(path);
  }
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

watch(route, newValue => {
  menuCurrent.value = newValue.path;
});
</script>

<style lang="less" scoped>
.slide {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 224px;
  height: 100vh;
  background: #071437;
  padding: 0 8px 50px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0;
  }

  .logo {
    height: 64px;

    img {
      max-width: 100%;
      max-height: 64px;
    }
  }
}

.menu-list {
  &::v-deep {
    .el-menu {
      background: none !important;
      border: none !important;
    }

    .el-sub-menu .el-sub-menu__icon-arrow {
      color: #909399;
    }

    .el-sub-menu__title:not(.is-active):hover,
    .el-menu-item:not(.is-active):hover {
      background-color: #06102c !important;
    }

    .is-active:not(.el-sub-menu) {
      border-radius: 4px;
      background: @main-color;
    }
  }

  .first-item {
    height: 40px;
    margin-bottom: 4px;
    padding-left: 24px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .15);

    span {
      color: #fff;
    }
  }

  .second-item {
    border-bottom: none !important;
    height: 48px;
    margin-bottom: 4px;

    i {
      color: #fff;
      font-size: 18px;
      margin-right: 10px;
    }

    span {
      color: #fff;
    }

    img {
      width: 48px;
      height: 16px;
    }
  }

  .active {
    border-radius: 4px;
    background: @main-color;
  }

  .third-item {
    color: #fff;
  }
}
</style>
